﻿<ul data-bind="foreach: planets">
    <li>
        Planet: <b data-bind="text: name"> </b>
        <div data-bind="if: capital">
            Capital: <b data-bind="text: capital.cityName"> </b>
        </div>
    </li>
</ul>
 
 
<script>
    ko.applyBindings({
        planets: [
            { name: 'Mercury', capital: null },
            { name: 'Earth', capital: { cityName: 'Barnsley'} },
            { name: 'Venus', capital: { cityName: 'Radujnij'} }
        ]
    });
</script>

